html,body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
dl,dt,dd,ul,li,h2,h3,h4,p {
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: normal;
}
em,i,a {
	font-style: normal;
	text-decoration: none;
}
/************************************** 公共样式 **************************************/
:root {
	/* 颜色 */
	--color-bg: #020421;
	--color-white: #b1bcff;
	--color-black: #000;
	--color-blue: #3376ff;
	--color-dark-blue: #333dff;
	--color-light-blue: #33c8ff;
	--color-violet: #e744ff;
	--color-yellow: #fff32c;
	--color-orange: #ffa32c;
	--color-green: #78d639;
	--color-cyan: #33ffb9;
	--color-red:#e52929;

	/* 半透明 */
	--bg-color-black: rgba(0, 0, 0, 0.5);

	/* 内外间距 */
	--row-space-sm: 5px;
	--row-space-sxm: 10px;

	/* 水平间距 */
	--spacing-sm: 1px;
	--spacing-base: 2px;
	--spacing-lg: 3px;

	/* 字体大小 */
	--font-size-base: 15px;
	--font-size-sm: 20px;
	--font-size-lg: 24px;
	--font-size-lm: 30px;
	--font-size-lx: 36px;
	--font-size-lh: 38px;

	/* 长度 */
	--length: 100%;
	--length-sm: 40px;
	--length-sxm: 55px;
	--length-base: 60px;
	--length-sxms: 70px;
	--length-lgs: 80px;
	--length-lg: 90px;

	/* 边框 */
	--border-lx: 1px solid #dadada;
	--border-sm: 1px solid rgba(91, 93, 207, 0.5);
	--border-smx: 1px solid #262870;
	--border-base: 2px solid #18f5ff;
	--border-lg: 10px solid #ffffff;
}

/* 标题字体渐变 */
.titleColor {
	background-image: -webkit-linear-gradient(left, rgba(0, 114, 205), rgba(0, 234, 255), rgba(1, 170, 255));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

/* iframe通用样式 */
.m_iframe {
	width: var(--length);
	height: calc(100% - 40px);
	border: none;
	overflow: hidden;
}

/* input 通用样式 */
.v_input{
	width: calc(100% - 10px);
	height: var(--font-size-lx);
	line-height: var(--font-size-lx);
	border: var(--border-lx);
	border-radius: var(--spacing-base);
	outline: none;
	padding: 0 var(--row-space-sm);
}
.layui-input{
	background: #dfe6ff;
}
#stars{
	position: absolute;
	top: 0;
	left:0;
}
/************************************** 主体结构 **************************************/
.main {
	width: var(--length);
	height: var(--length);
	font-size: var(--font-size-sm);
	color: var(--color-white);
	position: relative;
}
.swiper-container,
.map_container,
.area_container,
.pie_container,
.row_container,
.bar_container {
	width: var(--length);
	height: var(--length);
	margin-left: auto;
}

/************************************** 视频监控 **************************************/
.swiper-container{
	height: calc(100% - 80px);
	margin-top: var(--length-lgs);
}
.swiper-slide {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	align-content: stretch;
	flex-wrap: wrap;
}
.v_left {
	width: 66%;
	height: var(--length);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row;
	align-content: space-between;
}
.v_left .v_video:first-child {
	height: 66%;
	width: calc(100% - 2px);
}
.v_left .v_video {
	width: calc((100% - 15px) / 2);
}
.v_right {
	width: calc(34% - 10px);
	height: var(--length);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
}
.v_video {
	position: relative;
	background: var(--color-black);
	overflow: hidden;
	height: calc((100% - 25px) / 3);
	width: calc(100% - 2px);
	border: var( --border-sm);
}
.video,
.v_video video{
     width: 100%;
     height: 100%; 
     object-fit: fill;
}
.v_video_prompt {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: var(--bg-color-black);
	padding: var(--row-space-sm);
}
.v_video_prompt p {
	margin: 0;
	font-size: var(--font-size-base);
	color: #fff;
	line-height: var(--font-size-lm);
	letter-spacing: var(--spacing-base);
}
.v_video_offline {
	background-color: var(--color-black);
	width: var(--length);
	height: var(--length);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}
.v_video_offline img {
	text-align: center;
	width: var(--length);
}

/************************************** 智能大屏 **************************************/
.big_bg {
	background-color: var(--color-bg);
	background-image: url(../icon/main_bg.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
	height: calc(100% - 5px);
}

/* 一级标题 */
.m_header {
	height: var(--length-lgs);
	line-height: var(--length-sxm);
	letter-spacing: var(--spacing-lg);
	background:url(../icon/title_bg.gif) no-repeat top center / 100%;
	position: fixed;
	top:0px;
	left:0px;
	z-index: 1111;
	width: 100%;
}
.m_header span {
	position: absolute;
	left: var(--row-space-sxm);
	line-height: var(--font-size-lg);
	letter-spacing: var(--spacing-sm);
	font-size: var(--font-size-base);
	top: var(--font-size-sm);
}
.m_header span:last-child {
	right: var(--row-space-sxm);
	text-align: right;
}
.m_header i{
	width: 30%;
	display: flex;
	margin-left: 34%;
	align-content: center;
	align-items: center;
	font-size: var(--font-size-lx);
}
.m_header i img{
	padding-right: var(--row-space-sxm);
}
/* 二级标题 */
.panel_title {
	font-size: var(--font-size-sm);
	text-align: center;
	letter-spacing: var(--spacing-base);
	background: url(../icon/title_bg_2.png) no-repeat top center / 100% 100%;
	height: var(--length-sm);
	line-height: var(--length-sm);
}
/* 内容区 */
.m_charts {
	display: flex;
	height: 860px;
	justify-content: space-around;
	padding-top: var(--length-lgs);
}
.m_column,
.m_center {
	width: calc(28% - 1%);
	height: var(--length);
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: space-between;
}

/* 模块通用 */
.panel {
	overflow: hidden;
	position: relative;
	width: calc(100% - 2px);
	border: var(--border-sm);
	box-shadow: inset 10px 10px 41px 0px rgba(90, 129, 255, 0.21);
	-webkit-box-shadow: inset 10px 10px 41px 0px rgba(90, 129, 255, 0.21);
	-moz-box-shadow: inset 10px 10px 41px 0px rgba(90, 129, 255, 0.21);
	background-color: rgba(10, 11, 63, 0.7);
}
.m_column .panel {
	height: 32.5%;
}

/**** 左侧栏 ****/
.m_high .panel:last-child {
	height: 66%;
}

/* 左侧栏  网点情况统计  */
.p_area{
	height: calc(100% - 210px);
}
.bigArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: var(--font-size-base) 0;
}
.bigArea li{
	width: 30%;
	text-align: center;
	height: var(--length-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: var(--font-size-base);
	color: var(--color-white);
}
.bigArea li h3{
	font-size: var(--font-size-lg);
	padding-bottom: var(--row-space-sm);
}
.bigArea li:nth-child(1) h3,
.bigArea li:nth-child(4) h3{
	color: var(--color-light-blue);
}
.bigArea li:nth-child(2) h3,
.bigArea li:nth-child(5) h3{
	color: var(--color-yellow);
}
.bigArea li:nth-child(3) h3,
.bigArea li:nth-child(6) h3{
	color: var(--color-violet);
}
.bar_container{
	height: calc(100% - 180px);
	margin-top: var(--font-size-lg);
}
.area_flex li{
	width: 50%;
	padding: var(--row-space-sm) 0;
	height: var(--length-sxms);
}
.area_flex li:nth-child(1) h3,
.area_flex li:nth-child(3) h3{
	color: var(--color-light-blue);
}
.area_flex li:nth-child(2) h3,
.area_flex li:nth-child(4) h3{
	color: var(--color-violet);
}

/**** 中间栏 ****/
.m_center {
	width: 44.7%;
	height: var(--length);
}
.m_center .panel:first-child {
	height: 52%;
	background: url(../icon/panel_bg.png) no-repeat center top / 100% 100%;
	border: none;
	box-shadow: none;
}
.m_center .panel:first-child .panel_title{
	font-size: var(--font-size-lg);
	background: none;
}
.m_center .panel:last-child {
	height: 46.7%;
}

/* 中间栏  全区销量统计 */
.panel_data {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: stretch;
	justify-content: space-evenly;
	width: var(--length);
	height: calc(100% - 60px);
	padding-top: var(--font-size-sm);
}
.data_info {
	width: 48.5%;
	height: 48%;
	font-size: var(--font-size-base);
	border-radius: var(--row-space-sxm);
}
.data_info h2 {
	text-align: center;
	font-size: var(--font-size-sm);
	letter-spacing: var(--spacing-lg);
	border-top-left-radius: var(--row-space-sxm);
	border-top-right-radius: var(--row-space-sxm);
	padding: 2% 0;
	color:#fff;
}
.bg_1 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#0A105E), to(#6a2fff));
}
.bg_1 h2 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#0c0f5d), to(#4520b5));
}
.bg_2 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#1e0526), to(#9b3ebb));
}
.bg_2 h2 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#1e0328), to(#8a27ac));
}
.bg_3 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#071254), to(#14e08c));
}
.bg_3 h2 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#091d54), to(#0eb97f));
}
.bg_4 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#002331), to(#00cce4));
}
.bg_4 h2 {
	background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#002038), to(#08afca));
}
.data_info ul {
	display: flex;
	width: var(--length);
}
.data_info ul li {
	flex: 1;
	text-align: center;
	color: #fff;
}
.data_info ul li h3 {
	padding: var(--row-space-sxm) 0 0; 
	font-size: var(--font-size-lg);
}
.data_info ul li h4 {
	padding: var(--row-space-sxm) 0;
	font-size: var(--font-size-base);
}
.data_info ul li p {
	color: rgba(255,255,255, 0.6);
	padding-bottom: var(--row-space-sm);
	font-size: var(--font-size-base);
}

/* 中间栏  年销量地市任务达成 */
.p_columnarRow {
	height: calc(100% - 140px);
}
.column_info {
	display: flex;
	justify-content: space-evenly;
	height: var(--length-sxms);
	margin: var(--font-size-base) 0;
}
.column_info li {
	padding: 0% 3%;
	color: var(--color-white);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
}
.column_info li img {
	width: var(--length-sm);
}
.column_info li p {
	font-size: var(--font-size-base);
	flex: 2;
	padding-left: 10px;
}
.column_info li span {
	display: block;
}
.column_info li em {
	display: block;
	font-size: var(--font-size-lg);
}
.column_info li:first-child em {
	color: var(--color-light-blue);
}
.column_info li:nth-child(2) em {
	color: var(--color-yellow);
}
.column_info li:nth-child(3) em {
	color: var(--color-violet);
}

/**** 右侧栏 ****/
.m_first .panel {
	height: 35%
}
.m_first .panel:nth-child(2)  {
	height: 27%;
}
/* 右侧栏   资产占比 */
.p_annular{
	width: 50%;
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    right: 2%;
    top: 40px;
    justify-content: center;
    height: calc(100% - 40px);
}
.p_annular li{
	color: #8088c1;
	font-size:  var(--font-size-base);
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: var(--spacing-sm);
}
.p_annular li i{
	background-color: var(--color-blue);
	display: block;
	width: 12px;
	height: 12px;
	border-radius: var(--spacing-base);
}
.p_annular li span{
	width: 42%;
	display: block;
	text-align: left;
	margin-left: 8px;
}
.p_annular li em{
	width: 42%;
	display: block;
	text-align: right;
}
.p_annular li:nth-child(2) i{
	background-color: var(--color-violet);
}
.p_annular li:nth-child(3) i{
	background-color: var(--color-orange);
}
.p_annular li:nth-child(4) i{
	background-color: var(--color-green);
}


/* 右侧栏  全区监控统计 */
.area_container {
	height: calc(100% - 100px);
}
.bigLine {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-white);
	position: relative;
	width: calc((100% - 4%) - 2px);
	margin: var(--font-size-base) 2%;
	height: var(--length-sxms);
}
.bigLine li {
	position: relative;
	text-align: center;
	flex: 1;
}
.bigLine li h4 {
	font-size: var(--font-size-lg);
}
.bigLine li p {
	font-size: var(--font-size-base);
	padding-top: var(--row-space-sm);
}
.bigLine li:last-child::after {
	border: none;
}
.bigLine li:first-child h4 {
	color: var(--color-violet);
}
.bigLine li:nth-child(2) h4 {
	color: var(--color-cyan);
}
.bigLine li:nth-child(3) h4 {
	color: var(--color-green);
}
.bigLine li:nth-child(4) h4 {
	color: var(--color-yellow);
}
.bigLine li:nth-child(5) h4 {
	color: var(--color-blue);
}
.bigLine li:last-child h4 {
	color: var(--color-orange);
}
.big_line_color li:nth-child(1) h4 {
	color: var(--color-light-blue);
}
.big_line_color li:nth-child(2) h4 {
	color: var(--color-yellow);
}
.big_line_color li:nth-child(3) h4 {
	color: var(--color-violet);
}

/* 底部双栏 */
.m_row{
	width: 100%;
	margin-top: 9px;
	height: 400px;
	display: flex;
	justify-content: space-around;
}
.m_row .panel{
	width: 49.45%;
}

/* 地图  筛选区 */
.fold_conmont,
.mapList{
	display: none;
}
.fold_mini {
	display: block;
	transition: all 0.3s ease-in-out;
}
.fold_block{
	display: block;
	transition: all 0.6s ease-in-out;
}
.foldBtn{
	position: fixed;
	z-index: 9999999;
	top: 4px;
	right: 0;
	width: var(--length-base);
	height: var(--length-base);
	text-align: center;
}
.foldBtn i{
	font-size: var(--font-size-lx);
	color: #fff;
	line-height:var(--length-base);
	font-weight: normal;
}
.layui-icon-shrink-right{
	display: block;
}
.miniBtn .layui-icon-shrink-right{
	display: none;
}
.miniBtn .layui-icon-spread-left{
	display: block;
}
.layui-screen{
	position: fixed;
	width: calc(100% - 20px);
	padding: 0 10px;
	top: 63px;
	z-index: 200;
	border: none;
	background: #050f30;
	display: flex;
	height: var(--length-base);
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.layui-col-six{
	width: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	font-size: var(--font-size-base);
	color: var(--color-white);
	margin-right: var(--font-size-lg);
}
.layui-col-city{
	width: 17% !important;
	display: inline-block;
}
.layui-form-radio>i{
	color: var(--color-white);
}
.layui-form-radioed>i, .layui-form-radio>i:hover{
	color: #00c5ff;
}
.col_base{
	width: 10%;
}
.xm-input::placeholder,
.xm-input::-webkit-input-placeholder,
.xm-select-linkage li.xm-select-this span,
.layui-input,
.layui-input::-webkit-input-placeholder,
.xm-select-parent .xm-input::-webkit-input-placeholder{
	font-size: var(--font-size-base);
	color: #333!important;
}
.xm-select-parent .xm-select-sj,
.layui-form-select .layui-edge{
	border-top-color: #333;
}
.xm-select-parent .xm-select--suffix .xm-input,
.xm-select-linkage-group{
	background: #dfe6ff;
	color: #333;
}
.layui-btn-sm {
    height: var(--font-size-lh);
    line-height: var(--length-sm);
    padding: 0 var(--row-space-sxm);
    font-size: var(--font-size-base);
	background: var(--color-blue);
	cursor:pointer
}
.form_label{
	padding-right: 5px;
	height: 29px;
	line-height: 29px;
}
.form_block .layui-form-radio{
	margin: 0;
}
.form_block .layui-form-radio *{
	font-size: var(--font-size-base);
}
.layui-btn-sm:last-child{
	background: var(--color-red);
}

/* 地图   网点列表*/
.mapList{
	height: calc(100% - 160px);
	bottom: 0%;
	right: 0%;
	top: auto;
	overflow: hidden;
	width: 300px;
	background: #fff;
	border: none;
	z-index: 3;
	position: absolute;
}
/* tab标题 */
.mapList .layui-tab{
	height: var(--length);
}
.mapList .layui-tab-title{
	height: var(--length-sm);
}
.mapList .layui-tab-title li{
	line-height: var(--length-sm);
	font-size: var(--font-size-base);
}
/* 单个标题 */
.mapList h3 {
	font-size: var(--font-size-base);
    text-align: center;
    height: var(--length-sm);
    line-height: var(--length-sm);
	border-bottom: var(--border-lx);
    letter-spacing: var(--spacing-base);
	background: #6881d3;
	color: #fff;
}
.mapList .map-dl {
	overflow-y: scroll;
	height: calc(100% - 41px);
	padding: 0 5%;
	background: #dfe6ff;
}
.mapList .map-dl dt{
	padding-top: var(--row-space-sxm);
}
.mapList .map-dl dd {
	padding:var(--row-space-sm) var(--font-size-lg);
	padding-right: 0px;
	border-bottom: var(--border-lx);
	background: url(../icon/map-icon.png) no-repeat left center / 16px;
}
.mapList .map-dl dd:last-child{
	border: none;
}
.mapList .map-dl dd h2 {
	font-size: var(--font-size-base);
	line-height: var(--font-size-lm);
	color: var(--color-black);
}

/* 地图  视频弹出层 */
.videoBtn,
.pop_colse{
	background:var(--color-blue);
	color: #fff;
	width: 120px;
	height: var(--length-sxm);
	border-radius: 5px;
	text-align: center;
	line-height: var(--length-sxm);
	font-size: var(--font-size-sm);
	letter-spacing: var(--row-space-sxm);
}
.pop_colse{
    display: none;
    position: absolute;
    bottom: calc(18% - 75px);
    z-index: 99999999;
    left: calc((100% - 120px) / 2);
}
.videoBtn{
	letter-spacing: var(--spacing-base);
	font-size: var(--font-size-base);
	height: var(--font-size-lx);
	line-height:  var(--font-size-lx);
	width:  var(--length);
    margin:var(--row-space-sxm) auto 0;
	background: #6881d3;
}
.layui-layer{
    border: var(--border-lg);
    border-radius: var(--row-space-sxm);
}
.h-play-btn{
    background: var(--color-black);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.h-play-btn img{
    margin: 0;
}
/* 悬浮菜单 */
.menu {
	position: fixed;
	z-index: 100;
	bottom: 250px;
	right: 10px;
	transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
	display: block;
	box-sizing: border-box;
	height: var(--length-sxms);
	width:var(--length-sxms);
}
.menu.expanded {
	height: 340px;
	bottom: 150px;
}
span.item {
	opacity: 1;
	transition: .3s;
	display: block;
	height: var(--length-sxms);
	width: var(--length-sxms);
	margin-bottom: var(--font-size-sm);
	text-align: center;
	line-height: var(--font-size-lg);
	font-size: var(--font-size-base);
	cursor:pointer;
}
span.item:nth-of-type(1) {
	transition-delay: .4s;
}
span.item:nth-of-type(2) {
	transition-delay: .5s;
}
span.item:nth-of-type(3) {
	transition-delay: .6s;
}
span.hidden {
	height: 0;
	visibility: hidden;
	opacity: 0;
	transform: translateY(40px);
}
span.hidden:nth-of-type(1) {
	transition-delay: .4s;
}
span.hidden:nth-of-type(2) {
	transition-delay: .3s;
}
span.hidden:nth-of-type(3) {
	transition-delay: .2s;
}
span.item a {
	transition: .3s;
	display: block;
	border-radius: var(--length);
	margin-bottom: var(--row-space-sxm);
	padding: var(--row-space-sm);
	letter-spacing: var(--spacing-sm);
	height: var(--length-base);
	width: var(--length-base);
	display: flex;
	color: #fff;
	justify-content: center;
	align-items: center;
}
span.item:nth-of-type(1) a{
	background-color: #31aede;
}
span.item:nth-of-type(2) a{
	background-color: #e99326;
}
span.item:nth-of-type(3) a{
	background-color: #3fc799;
}
span.item:nth-of-type(1) a.item_cur{
	-moz-box-shadow:2px 2px 30px #31aede;
	-webkit-box-shadow:2px 2px 30px #31aede;
	box-shadow:2px 2px 30px #31aede;
}
span.item:nth-of-type(2) a.item_cur{
	-moz-box-shadow:2px 2px 30px  #e99326;
	-webkit-box-shadow:2px 2px 30px  #e99326;
	box-shadow:2px 2px 30px  #e99326;
}
span.item:nth-of-type(3) a.item_cur{
	-moz-box-shadow:2px 2px 30px #3fc799;
	-webkit-box-shadow:2px 2px 30px #3fc799;
	box-shadow:2px 2px 30px #3fc799;
}
.container {
	position: absolute;
	bottom: 0;
	height: var(--length-sxms);
	width: var(--length-sxms);
	transition: 1s;
}
.menu_btn {
	position: relative;
	height: var(--length-sxms);
	width: var(--length-sxms);
	font-size: var(--font-size-base);
	letter-spacing: var(--spacing-sm);
	border-radius: var(--length);
	background-color: var(--color-blue);
	display: flex;
	color: #fff;
	justify-content: center;
	align-items: center;
}

/* 模块四周线条 */
.panel::after,
.panel::before,
.line::after,
.line::before {
	position: absolute;
	content: "";
	width: var(--row-space-sxm);
	height: var(--row-space-sxm);
}
.panel::after {
	border-left: var(--border-base);
	border-top: var(--border-base);
	left: -1px;
	top: -1px;
}
.panel::before {
	right: -1px;
	top: -1px;
	border-right: var(--border-base);
	border-top: var(--border-base);
}
.line::after {
	border-left: var(--border-base);
	border-bottom: var(--border-base);
	left: -1px;
	bottom: -1px;
}
.line::before {
	right: -1px;
	bottom: -1px;
	border-right: var(--border-base);
	border-bottom: var(--border-base);
}

/* 移动端 */
@media screen and (min-width:320px) and (max-width:720px) {
	html, body{
		overflow: auto;
	}
	:root {
		--color-bg: #08103c;
		--color-white: #8088c1;
		/* 字体大小 */
		--font-size-base: 14px;
		--font-size-sm: 18px;
		--font-size-lg: 20px;
		--font-size-lm: 24px;
	}
	.big_bg{
		width:var(--length);
		padding: 0;
	}
	.main{
		width: 98%;
		padding: 0 1%;
	}
	/* 头部 */
	.m_header{
		height: var(--length-lg);
		background-color: var(--color-bg);
		background-image: url(../icon/h_icon_bg.png);
		background-position: top center;
		background-size: calc(100% - 10px);
		letter-spacing: var(--spacing-sm);
	}
	.m_header i {
	    width: 60%;
	    display: flex;
	    margin-left: 20%;
	    align-content: center;
	    align-items: center;
	    flex-wrap: wrap;
	    font-size: var(--font-size-sm);
		text-align: center;
		padding-top: var(--row-space-sm);;
	}
	.m_header i em{
		display: block;
		height: var(--font-size-lx);
		line-height: var(--font-size-lx);
		width: var(--length);
	}
	/* 主体 */
	.m_charts{
		height: auto;
		display: block;
	}
	.panel{
		margin-bottom: var(--font-size-base);
	}
	/* 总销量 */
	.data_info{
		width: var(--length);
		height: auto;
	}
	.data_info ul{
		padding: var(--font-size-base) 0;
	}
	.data_info ul li h3{
		padding: 0 0 var(--row-space-sxm);
	}
	.data_info ul li h4{
		padding-bottom: var(--row-space-sm);
	}
	.data_info ul li:first-child h3,
	.data_info ul li:first-child h4{
		color: var(--color-light-blue);
	}
	.data_info ul li:last-child h3,
	.data_info ul li:last-child h4{
		color: var(--color-yellow);
	}
	.data_info ul li p{
		padding:var(--row-space-sm) 0 0;
	}
	
	/* 地市销量 */
	.column_info li em{
		font-size: var(--font-size-sm);
	}
	/* 图表固定高度 */
	.h_chart{
		height: 280px!important;
	}
	.h_pie{
		height: 220px!important;
	}
	
}
